<!DOCTYPE html>
<html>
<head>
    <#include "../../common/head.ftl">
    <link rel="stylesheet" href="${ctx}/css/fileinput.min.css"></link>
    <script type="text/javascript" src="${ctx}/js/fileinput.js"></script>
    <script type="text/javascript" src="${ctx}/js/fileinput_locale_zh.js"></script>
    <script type="text/javascript">
        function delfunc(obj) {
            layer.confirm('确认删除？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        type: 'post',
                        url: $(obj).attr('data-url'),
                        data: {act: 'del', del_id: $(obj).attr('data-id')},
                        dataType: 'json',
                        success: function (data) {
                            if (data == 1) {
                                layer.msg('操作成功', {icon: 1});
                                $(obj).parent().parent().remove();
                            } else {
                                layer.msg(data, {icon: 2, time: 2000});
                            }
                            layer.closeAll();
                        }
                    })
                }, function (index) {
                    layer.close(index);
                    return false;// 取消
                }
            );
        }

        //全选
        function selectAll(name, obj) {
            $('input[name*=' + name + ']').prop('checked', $(obj).checked);
        }

        function get_help(obj) {
            layer.open({
                type: 2,
                title: '帮助手册',
                shadeClose: true,
                shade: 0.3,
                area: ['90%', '90%'],
                content: $(obj).attr('data-url'),
            });
        }

        function delAll(obj, name) {
            var a = [];
            $('input[name*=' + name + ']').each(function (i, o) {
                if ($(o).is(':checked')) {
                    a.push($(o).val());
                }
            })
            if (a.length == 0) {
                layer.alert('请选择删除项', {icon: 2});
                return;
            }
            layer.confirm('确认删除？', {btn: ['确定', '取消']}, function () {
                    $.ajax({
                        type: 'get',
                        url: $(obj).attr('data-url'),
                        data: {act: 'del', del_id: a},
                        dataType: 'json',
                        success: function (data) {
                            if (data == 1) {
                                layer.msg('操作成功', {icon: 1});
                                $('input[name*=' + name + ']').each(function (i, o) {
                                    if ($(o).is(':checked')) {
                                        $(o).parent().parent().remove();
                                    }
                                })
                            } else {
                                layer.msg(data, {icon: 2, time: 2000});
                            }
                            layer.closeAll();
                        }
                    })
                }, function (index) {
                    layer.close(index);
                    return false;// 取消
                }
            );
        }
    </script>
    <meta name="__hash__" content="5ab856735c6bdf6e6c05512f732b7cb9_c69aca1884010e29fc472c9ece13ff67"/>
</head>
<body style="background-color:#ecf0f5;">


<div class="wrapper">
    <div class="breadcrumbs" id="breadcrumbs">
        <ol class="breadcrumb">
            <li><a href="javascript:void(0);"><i class="fa fa-home"></i>&nbsp;&nbsp;后台首页</a></li>

            <li><a href="javascript:void(0);">商品管理</a></li>
            <li><a href="javascript:void(0);">添加修改分类</a></li>
        </ol>
    </div>

    <section class="content">
        <div class="row">
            <div class="col-sm-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">增加分类</h3>
                        <div class="pull-right">
                            <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default"
                               data-original-title="返回"><i class="fa fa-reply"></i></a>
                            <a href="javascript:;" class="btn btn-default"
                               data-url="http://www.ego.cn/Doc/Index/article/id/1006/developer/user.html"
                               onclick="get_help(this)"><i class="fa fa-question-circle"></i> 帮助</a>
                        </div>
                    </div>

                    <!-- /.box-header -->
                    <form action="/index/Admin/Goods/addEditCategory" method="post" class="form-horizontal"
                          id="category_form">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">分类名称</label>
                                <div class="col-sm-6">
                                    <input type="text" placeholder="名称" class="form-control large" name="name"
                                           value="手机 、 数码 、 通信">
                                    <span class="help-inline" style="color:#F00; display:none;" id="err_name"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">分类名称</label>
                                <div class="col-sm-6">
                                    <input type="text" placeholder="手机分类名称" class="form-control large"
                                           name="mobileName" value="数码产品" id="mobile_name">
                                    <span class="help-inline" style="color:#F00; display:none;"
                                          id="err_mobile_name"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label0 class="control-label col-sm-2">上级分类</label0>
                                <input type="hidden" name="parentId" id="parentId" value="0">
                                <input type="hidden" name="level" id="level" value="1">
                                <div class="col-sm-3">
                                    <select name="parent_id_1" id="parent_id_1"
                                            onchange="getCategory(this.value,'parent_id_2','0');"
                                            class="small form-control">
                                        <option value="0">顶级分类</option>
                                        <#list gcList as gc>
                                            <option value="${gc.id}">${gc.name}</option>
                                        </#list>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select name="parent_id_2" id="parent_id_2" class="small form-control" onchange="setParentId(this.value,'3')">
                                        <option value="0">请选择商品分类</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">导航显示</label>

                                <div class="col-sm-10">
                                    <label>
                                        <input checked="checked" type="radio" name="isShow" value="1"> 是
                                        <input type="radio" name="isShow" value="0"> 否

                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">分类分组:</label>

                                <div class="col-sm-2">
                                    <select name="catGroup" id="cat_group" class="form-control">
                                        <#list catGroupList as catGroup>
                                            <option value=${catGroup}>${catGroup}</option>
                                        </#list>
                                        <option value=${catGroupSize}>新增分类</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">分类展示图片</label>
                                <input type="hidden" id="image" name="image"/>
                                <#--图片上传方法-->
                                <form enctype="multipart/form-data">
                                        <input id="file-goods-category" class="file" name="file" type="file" data-min-file-count ="1">
                                </form>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">显示排序</label>
                                <div class="col-sm-1">
                                    <input type="text" placeholder="50" class="form-control large" name="sortOrder"
                                           value="50"/>
                                    <span class="help-inline" style="color:#F00; display:none;"
                                          id="err_sort_order"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">分佣比例</label>
                                <div class="col-sm-1">
                                    <input type="text" placeholder="50" class="form-control large"
                                           name="commissionRate" id="commission_rate" value="0"
                                           onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
                                           onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"/>
                                </div>
                                <div class="col-sm-1" style="margin-top: 6px;margin-left: -20px;">
                                    <span>%</span>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">
                            <input type="hidden" name="id" value="1">
                            <button type="reset" class="btn btn-primary pull-left"><i class="icon-ok"></i>重填</button>
                            <button type="button"
                                    onclick="ajaxSubmitForm();"
                                    class="btn btn-primary pull-right"><i class="icon-ok"></i>提交
                            </button>
                        </div>
                        <input type="hidden" name="__hash__"
                               value="5ab856735c6bdf6e6c05512f732b7cb9_c69aca1884010e29fc472c9ece13ff67"/></form>
                </div>
            </div>
        </div>
    </section>
</div>
<script>

    /** 以下是编辑时默认选中某个商品分类*/
    $(document).ready(function () {


    });

</script>

<script>
      function getCategory(id,next,select_id) {
          var url='${ctx}/goodsCategory/'+id;
          var htmlStr="<option value='0'>请选择商品分类</option>";

          if (id==0){
              $("#"+next).html(htmlStr);
              return;
          }
          $.ajax({
              type:"GET",
              url: url,
              error: function (request) {
                  layui.alert("获取子分类失败！");
              },
              success: function (result) {
                  if (result.length>0){
                      for (var i = 0; i <result.length ; i++) {
                          htmlStr+="<option value='"+result[i].id+"'>"+result[i].name+"</option>";
                      }
                      $("#"+next).html(htmlStr);
                  }else {
                      layui.alert("获取子分类失败！");
                  }
              }
          })
      }
      /**
       *保存分类
       */
      function ajaxSubmitForm() {
          $.ajax({
              url: "${ctx}/goodsCategory/addCategory",
              type: "post",
              data: $("#category_form").serialize(),
              dataType: "JSON",
              success: function (result) {
                  if (result.code == 200) {
                      layer.confirm("保存成功", {btn: ['继续新增', '返回列表']},
                          function () {
                              window.location.href = "${ctx}/goodsCategory/addPage";
                          }, function () {
                              window.location.href = "${ctx}/goods_manager/categoryList";
                          });
                  } else {
                      layer.alert("保存失败");
                  }
              },
              error: function () {
                  layer.alert("保存失败");
              }
          });
      }

      /**
       * 设置parentId和level
       */
      function setParentId(parentId, level) {
          console.log(parentId);
          // 修改parentId和level
          if (0 == parentId) {
              $("#parentId").val($("#parent_id_1").val());
              $("#level").val(2);
              return;
          }
          // 修改parentId和level
          $("#parentId").val(parentId);
          $("#level").val(level);
      }


      //======================图片上传================================
      /**
       * 初始设置
       *    language指定语言
       *    uploadUrl指定文件上传的后台地址
       *    allowedPreviewTypes允许上传文件的类型
       */
      $('#file-goods-category').fileinput({
          language: 'zh',
          uploadUrl: '${ctx}/fileUpload/save',
          allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash']
      });
      /**
       * 上传文件失败后 调用方法（回调函数）
       */
      $('#file-goods-category').on('fileuploaderror', function (event, data, previewId, index) {
          var form = data.form,
              files = data.files, e
          xtra = data.extra,
              response = data.response,
              reader = data.reader;

          console.log(data);
          console.log('File upload error');
      });
      /**
       * 文件错误 比如文件类型错误 调用方法（回调函数）
       */
      $('#file-goods-category').on('fileerror', function (event, data) {
          console.log(data.id);
          console.log(data.index);
          console.log(data.file);
          console.log(data.reader);
          console.log(data.files);
      });
      /**
       * 文件上传成功后 调用方法（回调函数）
       */
      $('#file-goods-category').on('fileuploaded', function (event, data, previewId, index) {
          var form = data.form,
              files = data.files,
              extra = data.extra,
              response = data.response,
              reader = data.reader;
          // 服务器文件地址
          // alert(data.response.fileUrl);
          // 将服务器文件地址设置至隐藏域
          $("#image").val(data.response.fileUrl);
          console.log('File uploaded triggered');
      });
      //======================图片上传================================
</script>
</body>
</html>